<template>
  <div>
    <el-dialog
      title="上传素材"
      :visible.sync="showDialog"
      :append-to-body="true"
    >
      <el-upload
        class="upload-demo"
        drag
        action="http://api-toutiao-web.itheima.net/mp/v1_0/user/images"
        :headers="headers"
        :on-remove="handleRemove"
        name="image"
        multiple=""
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>
    </el-dialog>
    <el-card>
      <el-button @click.native="uploadImg"> 添加素材 </el-button>
    <div class="pic_cont">
        <div class="pic_item" v-for="(item,index) in picList" :key="index">
            <img :src="item.url" alt="">
        </div>
    </div>
    </el-card>
  </div>
</template>

<script>
import {getImageList} from '../../api/image.js'
export default {
  name: "ImageIndex",
  data() {
    const user = JSON.parse(window.localStorage.getItem('user'))
    return {
      showDialog: false,
      fileList: [],
      headers:{
          Authorization:`Bearer ${user.token}`
      },
      picList:[],
    //   collect:false
    };
  },
  created(){
      this.getPic()
  },
  methods: {
    getPic(collect =false){
        getImageList({collect}).then(res=>{
            this.picList=res.data.data.results
        })
    },
    uploadImg() {
      this.showDialog = true;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
  },
};
</script>

<style lang="less" scoped>
.pic_cont{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}
.pic_item{
    // width: 30%;
    height: 200px;
    img{
        width: 200px;
        height: 200px;
    }
}
</style>